<template>
  <div class="contentright">
    <div class="name">
      <h1 class="title">许小浩</h1>
    </div>
    <div class="wish">
      <div class="left">
        <div class="row">
          <label for="">求职意向：</label>
          <text>前端开发工程师</text>
        </div>
        <div class="row">
          <label for="">期望薪资：</label>
          <text>10k-15k</text>
        </div>
      </div>
      <div class="right">
        <div class="row">
          <label for="">意向城市：</label>
          <text>广州</text>
        </div>
        <div class="row">
          <label for="">入职时间：</label>
          <text>一个月内</text>
        </div>
      </div>
    </div>
    <div class="personInfo">
      <div class="edu">
        <div class="title">
          <el-icon size="25" color="#254665"><Reading /></el-icon>
          <text>教育经历</text>
        </div>
        <div class="content">
          <div class="total">
            <span>2023-2027</span>
            <span>广东药科大学</span>
            <span>计算机科学与技术(本科)</span>
          </div>
          <div class="extra">
            <div class="score">
              <label for="">专业绩点：</label><text>3.5</text>
            </div>
            <div class="course">
              <label for="">主修课程：</label>
              <text
                >数据结构,计算机网络，操作系统，数据库原理，计算机组成原理，java程序设计等等</text
              >
            </div>
          </div>
        </div>
      </div>
      <div class="exp">
        <div class="title">
          <el-icon size="25" color="#254665"><Handbag /></el-icon>
          <text>项目经历</text>
        </div>
        <div class="content">
          <div class="row">
            <div class="point">
              <span class="time">xxxx-xxxx</span>
              <span class="project-name">"远智康颐"绿色环保网页开发</span>
              <span class="status">队长</span>
            </div>
            <div class="detail">
              <text>
                为响应可持续发展理念，设计集绿色宣传、二手交易、碳足迹计算于一体的综合性环保平台，助力用户践行低碳生活方式。
                项目基于 Vue+Strapi+MySQL
                技术栈，实现前后端分离架构，目前处于测试优化阶段。
                技术亮点:数据双向同步机制:通过 Strapi 提供的 API
                接口，实现前端操作(如购物车修改)与后台数据的实时同步，数据更新延迟
                ≤1 秒。
                模块化开发模式:将网页拆分为商品模块、用户模块、购物车模块等独立组件，代码复用率提升
                30%，维护效率显著提高。
              </text>
              <span
                >成绩:
                第七届传智杯全国IT技能大赛web网页开发挑战赛B组省赛三等奖(三等组第一)</span
              >
            </div>
          </div>
          <div class="row">
            <div class="point">
              <span class="time">xxxx-xxxx</span>
              <span class="project-name"
                >图书管理模拟系统（前后端分离架构）</span
              >
              <span class="status">个人作品</span>
            </div>
            <div class="detail">
              <text>
                项目描述: 本项目是一个完整的图书管理系统后端，采用 Spring Boot
                框架搭建，结合 MyBatis 进行数据库操作，实现了用户管理、
                图书借阅管理等核心功能。系统支持用户注册、登录、修改密码，管理员可对图书信息进行管理，普通用户可查询和借阅图
                书，同时系统具备完善的异常处理机制，确保服务的稳定性和可靠性。
                技术栈:
                运用了Springboot+vue框架实现了前后端分离设计。后端:SpringBoot+MyBatis+
                JWT 认证，前端:Vue 3 + Vue Router + Vuex + Element Plus UI
                组件库，数据库:mysql。
              </text>
              <span>成绩:项目获得课程设计评分90分</span>
            </div>
          </div>
        </div>
        <div class="honor">
          <div class="title">
            <el-icon :size="25" color="#254665"><Medal /></el-icon>
            <text>荣誉证书</text>
          </div>
          <div class="content">
            <span
              >获得广东药科大学2023-2024学年红棉奖学金（学业优秀奖）三等奖</span
            >
            <span
              >第七届传智杯全国IT技能大赛web网页开发挑战赛B组省赛三等奖</span
            >
            <span
              >第十六届蓝桥杯全国软件和信息技术专业人才大赛广东赛区c/c++程序设计大学B组三等奖</span
            >
            <span>大学英语CET-4证书</span>
          </div>
        </div>
        <div class="selfeva">
          <div class="title">
            <el-icon size="25" color="#254665"><ChatDotSquare /></el-icon>
            <text>自我评价</text>
          </div>
          <div class="content">
              <span
                >我始终以严谨认真的态度对待每一项任务，具备较强的责任心和执行力。面对既定目标，会主动规划工作步骤，高效推进进程，确保按时保质完成任务，同时注重细节把控，力求将每一件事做到精准到位。</span
              >
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
</script>
<style scoped lang='scss'>
.contentright {
  width: 60%;
  background: white;
  min-height: 900px;
  border-left: none;
  .name {
    margin-top: 20px;
    margin-left: 20px;
    .title {
      font-size: 40px;
      font-weight: 500;
    }
  }
  .wish {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    .left,
    .right {
      width: 50%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .row {
        display: flex;
      }
    }
  }
  .personInfo {
    width: 95%;
    margin-top: 20px;
    margin-left: 20px;
    .edu,
    .exp,
    .honor,
    .selfeva {
      .title {
        display: flex;
        align-items: center;
        font-size: 20px;
        border-bottom: 1px solid #ccc;
        padding: 5px;
      }
    }
    .edu {
      width: 100%;
      min-height: 150px;
      .content {
        .total {
          display: flex;
          justify-content: space-around;
          padding: 10px;
          span:nth-child(2) {
            font-weight: bold;
          }
          span:nth-child(3) {
            font-weight: bold;
          }
        }
        .extra {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
      }
    }
    .exp {
      width: 100%;
      min-height: 400px;
      .content {
        padding: 10px;
        .row {
          padding-bottom: 10px;
          .point {
            display: flex;
            justify-content: space-around;
            padding-bottom: 10px;
          }
          .detail {
            display: flex;
            flex-direction: column;
            gap: 5px;
            line-height: 1.5;
            span {
              font-weight: bold;
            }
            text {
              font-size: 15px;
            }
          }
        }
      }
    }
    .honor {
      width: 100%;
      min-height: 100px;
      .title {
      }
      .content {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 20px;
      }
    }
    .selfeva {
      width: 100%;
    }
  }
}
</style>
